import React, { useRef, useState } from 'react'
import { Button,  Swiper, Toast,Popup, Space, } from 'antd-mobile'
import { Sticky } from '@nutui/nutui-react'
import './App.css'
import { Tabs } from 'antd-mobile'
import { Divider } from '@nutui/nutui-react'
import { Outlet, useNavigate } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
const colors = ['https://img95.699pic.com/photo/40244/2615.jpg_wh860.jpg', 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4sk-CHBgmYfinagp1zu7QAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2', 'https://ts1.cn.mm.bing.net/th?id=OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2', 'https://ts3.cn.mm.bing.net/th?id=OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2']


const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div className='box'>
      <div
        className='content'
        style={{ background: colors }}
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`)
        }}
      >

        <img src={colors[index]} alt="" />
      </div>
    </div>
  </Swiper.Item>

))
function App() {
  const location = useLocation()
  const _id = useLocation().search.split('=')[1]
  console.log(_id)
  const navigate = useNavigate()
  return (

    <div className='box1'>

      <div>
      <Outlet>
      </Outlet>
      </div>
          <div className='box6'>
          <Tabs defaultActiveKey='' onChange={(e)=>{
            navigate(`./${e}?_id=${_id}`)
          }}>
          <Tabs.Tab title='寄快递' key='jzw' >

          </Tabs.Tab>
          <Tabs.Tab title='京东商城' key='shou'>

          </Tabs.Tab>
          <Tabs.Tab title='查快递' key='suo'>

          </Tabs.Tab>
          <Tabs.Tab title='每日福利' key='san'>

          </Tabs.Tab>
          <Tabs.Tab title='我' key='si'>

          </Tabs.Tab>
        </Tabs>

          </div>
        </div>

        )
}
export default App
